<template>
  <div class="div-background-ErrorPoint">
    <div>
      <img src="@/assets/img/other/icon-问题点.png" class="img-ErrorPoint" /><span
        class="user-ErrorPoint-span"
        >错误点</span
      >
    </div>
    <div class="ErrorPoint-all" v-if="State.ErrorPointEmptyBoolean">
      <div class="ErrorPoint-process">
        <span class="ErrorPoint-number" v-show="State.ErrorPoint.tool>0.6">{{numFilter(State.ErrorPoint.tool)}}%</span>
        <span class="ErrorPoint-number-red" v-show="State.ErrorPoint.tool<=0.6">{{numFilter(State.ErrorPoint.tool)}}%</span>
        <span class="ErrorPoint-text">工业流程正确率</span>
      </div>
      <div class="ErrorPoint-apply">
        <span class="ErrorPoint-number" v-show="State.ErrorPoint.standard>0.6">{{numFilter(State.ErrorPoint.standard)}}%</span>
        <span class="ErrorPoint-number-red" v-show="State.ErrorPoint.standard<=0.6">{{numFilter(State.ErrorPoint.standard)}}%</span>
        <span class="ErrorPoint-text">工具使用正确率</span>
      </div>
      <div class="ErrorPoint-operate">
        <span class="ErrorPoint-number" v-show="State.ErrorPoint.process>0.6">{{numFilter(State.ErrorPoint.process)}}%</span>
        <span class="ErrorPoint-number-red" v-show="State.ErrorPoint.process<=0.6">{{numFilter(State.ErrorPoint.process)}}%</span>
        <span class="ErrorPoint-text">操作规范正确率</span> 
      </div>
    </div>
    <div v-else class="ErrorPoint-all-No">
      <span>暂无数据</span>
    </div>
  </div>
</template>
<script>
import { defineComponent, reactive} from "vue";
import bus from '@/bus.js'
export default defineComponent({
  name: "HomeErrorPoint",
  components: {},
  setup() {
    let State = reactive({
        ErrorPoint:{
          tool:0,
          standard:0,
          process:0
        },
        ErrorPointEmptyBoolean:false,
    })
    bus.$off('ErrorPoint')
    //不同组件传值
    bus.$on('ErrorPoint', (data) => {
      if(data==='empty'){
        State.ErrorPointEmptyBoolean=false
      }else{
        State.ErrorPointEmptyBoolean=true
        State.ErrorPoint = data
      }
    })
    //小数点截取
    function numFilter(value){
        let realVal = '';
        if (!isNaN(value) && value !== '') {
            let tempVal = parseFloat(value).toFixed(3);
            realVal = tempVal.substring(0, tempVal.length - 1);
        }else {
            realVal = '–';
            }
        return realVal;
    }
    return {
      State,
      numFilter
    };
  },
});
</script>
<style lang="less">
.div-background-ErrorPoint {
  position: absolute;
  width: 430px;
  height: 180px;
  top: calc(100% - 190px);
  border-radius: 16px;
  background-color: #ffffff;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
}
.div-background-ErrorPoint {
  left: 1450px;
}
.img-ErrorPoint {
  position: absolute;
  width: 24px;
  height: 24px;
  left: 19px;
  top: 19px;
}
.user-ErrorPoint-span {
  position: absolute;
  left: -6px;
  top: 18px;
  width: 180px;
  height: 24px;
  font-size: 18px;
  color: #81859c;
  font-family: Source Han Sans CN;
  font-weight: 400;
}
.ErrorPoint-all span {
  display: block;
  text-align: center;
  padding-top: 33px;
  //允许换行
  word-wrap: break-word;
}
.ErrorPoint-process {
  position: absolute;
  left: 25px;
  top: 35px;
}
.ErrorPoint-apply {
  position: absolute;
  left: 165px;
  top: 35px;
}
.ErrorPoint-operate {
  position: absolute;
  left: 305px;
  top: 35px;
}
.ErrorPoint-number {
  font-size: 30px;
  color: #218cde;
}
.ErrorPoint-number-red {
  font-size: 30px;
  color: red;
}
.ErrorPoint-text {
  font-size: 16px;
  color: #81859c;
  font-weight: 400;
}
.ErrorPoint-all-No{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 400;
  color: #81859c;
}
</style>
